import htm from 'htm'
export const html = htm.bind(e)
/**
 * Create HTMLElement
 * @param {string} tag_name tag name
 * @param {HTMLElement} attr attribute
 * @param {Array<HTMLElement> | Array<string>} children children
 * @returns {HTMLElement} html element
 */
export function e(tag_name, attr, ...children){
  let elem;
  if (typeof(tag_name) === "string")
    elem = document.createElement(tag_name);
  else if (tag_name instanceof ComponentClass)
    elem = tag_name.element
  else if (tag_name instanceof HTMLElement)
    elem = tag_name
  for (let k in attr){
    elem[k] = attr[k];
    if (k === "style"){
      for (let sk in attr.style){
        elem.style[sk] = attr.style[sk];
      }
    }
  }
  children.forEach((child)=>{
    if (child instanceof HTMLElement || typeof(child) === "string"){
      elem.append(child);
    }
  });
  return elem;
}

/**
 * Create HTMLElement Factory
 * @param {string} tag_name tag name
 * @returns {(attr:HTMLElement, ...children: Array<HTMLElement> | Array<string>) => HTMLElement} function to create html element
 */
export function factory(tag_name){
  return e.bind(null,tag_name);
}

/**
 * assignstyle to element
 * @param {HTMLElement} element 
 * @param {object} style 
 */
export function style(element, style){
  for (let sk in style){
    element.style[sk] = style[sk];
  }
}
